<template>
	<div>
		<Form :model="searchData" inline :label-width="60">
			<FormItem label="身份证:">
                <Input type="text" v-model="searchData.ID_Card" placeholder="按身份证搜索"></Input>
            </FormItem>
            <FormItem label="手机号:">
            	<Input type="text" v-model="searchData.tel" placeholder="按手机号搜索"></Input>
            </FormItem>
            <Button class="singlebutton" icon="ios-search" :loading="isSearch" type="primary" @click="search">搜索</Button>
		</Form>
		<v-table ref="vTable" :tableColumns="tableColumns" :tableData="tableData" :totalPage="totalPage" :isPage="isPage" @getPage="selectPage"></v-table>
	</div>
</template>

<script>
	import vTable from '@/components/common/Table.vue'
	export default {
		components: {
			vTable
		},
		data(){
			return {
				searchData: {
					ID_Card: '',
					tel: ''
				},
				isSearch: false,
				totalPage: 1,
      			isPage: false,
				tableColumns: [
					{ title: '姓名',  key: 'real_name', align: "center" },
					{ title: '性别',  key: 'gender', align: "center" },
					{ title: '年龄',  key: 'age', align: "center" },
					{ title: '就诊门类',  key: 'departmentCategory', align: "center" },
					{ title: '就诊医院',  key: 'hospitalName', align: "center" },
					{ title: '就诊结果',  key: 'treatmentResult',  align: "center" },
					{ title: '就诊时间',  key: 'treatment_time', align: "center" },
					{ title: '手机号',  key: 'tel', align: "center" },
					{ title: '身份证号',  key: 'ID_card', align: "center" },
					{
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: { type: 'primary', size: 'small' },
                                    style: { marginRight: '5px' },
                                    on: {
                                        click: () => {
//                                      	this.$router.push('/case/info/edit/:123')
											this.$router.push({
												path: '/case/info/edit/' + params.row.customer_id
											})
                                        }
                                    }
                                }, '查看详情')
                            ]);
                        }
                    }
				],
				tableData: []
			}
		},
		// 初始化数据
		created(){
			this.getData('/medical_history/list', this.searchData)
		},
		methods: {
			// 获取数据 
			getData(url,jsonData){
				//  获取数据
				this.$http.get(url,jsonData)
				.then(({data})=>{
					console.log(data)
					this.tableData = data.data.list;
					
					//  分页
					this.totalPage = data.data.total;
					if(this.totalPage > 1) {
						this.isPage = true;
					} else {
						this.isPage = false;
					}
					
					if (this.isSearch) {
			        	this.isSearch = false;
			        }
				})
				.catch((err)=>{
					console.log(err);
					this.$Notice.error({ title: "病历信息获取失败！" });
					if (this.isSearch) {
			        	this.isSearch = false;
			        }
				})
			},
			// 分页
			selectPage(pageNum){
				this.getData('/medical_history/list', {
					params: {
						page: pageNum,
						limit: 10
					}
				})
			},
			// 搜索
			search(){
				this.isSearch = true;
				
				//   因为不知为何下面的请求 行不通， 所以用比较蠢的方法, 后面再改
				if(this.searchData.ID_Card == '' && this.searchData.tel == ''){
					this.getData('/medical_history/list')
				} else if(this.searchData.ID_Card !== ''){
					this.getData('/medical_history/list?ID_Card=' + this.searchData.ID_Card)
				} else if(this.searchData.tel !== '') {
					this.getData('/medical_history/list?tel=' + this.searchData.tel)
				}
				
//				this.getData('/medical_history/list', {
//					params: {
//						ID_Card: this.searchData.ID_Card,
//						tel: this.searchData.tel
//					}
//				})
			},
		
		}
	}
</script>

<style>
</style>